<template>
  <div class="ordersContainer">
    <!-- 版头 -->
    <van-nav-bar
      title="我的订单"
      left-arrow
      @click-left="$router.back()"
      style="background: #e11c34;"
    />
    <!-- 商品列表 -->
    <van-cell-group v-for="item in list" :key="item.id">
      <van-cell :title="'订单编号：' + item.order_sn">
        <span style="color: red;">未付款</span>
      </van-cell>
      <!-- <div class="goodsList">
        <span>订单编号：{{item.order_sn}}</span>
        <span>未付款</span>
      </div> -->
      <van-cell v-for="item in item.goodsList" :key="item.goods_id">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="goods">
            <van-image
            width="100"
            height="100"
            :src="item.list_pic_url"
          />
          <div class="goodsList">
            <p>{{ item.goods_name }}</p>
            <p>共{{ item.number }}件</p>
          </div>
          </div>
        </template>
      </van-cell>
      <van-cell :title="'需付：￥' + item.actual_price">
        <van-button type="danger" @click="$router.push('/paymentOrder/'+item.id)" size="small">去付款</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getOrderListData } from '@/api/han/order'
export default {
  name: 'orders',
  data() {
    return {
      list: [], // 订单列表
    }
  },
  created() {
    this.getOrderListData()
  },
  methods: {
    async getOrderListData() {
      let { data } = await getOrderListData()
      this.list = data.data.data
      console.log(data.data)
    },
    onClickLeft() {
      console.log(1)
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
.goods{
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>
